<!--
 * @Author: sunli
 * @Date: 2024-02-20 09:47:59
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-28 15:05:16
 * @FilePath: /debug/src/views/login/modify.vue
 * @Description: 
-->
<template>
<div class="bg"></div>
	<div class="register">
		<p>密码修改</p>
		<div class="main">
			<el-input class="input" v-model="oldPwd" placeholder="原密码" />
			<el-input class="input" v-model="newPwd" type="password" show-password placeholder="新密码" />
			<el-input class="input" v-model="confirmPwd" type="password" show-password placeholder="确认密码" />
			<el-button class="submit" type="primary" @click="submit">确 认</el-button>
		</div>
		<div class="tip">
			<el-link type="primary" :underline="false" @click="router.push('/login')">返回登录</el-link>
		</div>
	</div>
</template>
  
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import httpReq from '@/request'
import { ElMessage, ElLoading } from 'element-plus'

import useStore from '@/store/index'

const store = useStore()
const router = useRouter()

const oldPwd = ref()
const newPwd = ref()
const confirmPwd = ref()

const submit = async() => {
	const params = {
    userName: store.userVO.userName,
		oldPwd: oldPwd.value,
		newPwd: newPwd.value,
		confirmPwd: confirmPwd.value
	}
	const res = await httpReq.post('http://localhost:8092/login/modifyPwd', params)

  ElMessage.success('密码修改成功')
	router.push('/login')
}
</script>

<style lang="scss" scoped>
.bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);
}
.register {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 30px;
	box-shadow: 1px 1px 10px #999;
	border-radius: 5px;
	background-color: #fff;
	p {
		margin-bottom: 20px;
		font-size: 26px;
		font-weight: bold;
	}
	.tip {
		text-align: right;
		margin-top: 5px;
	}
	.main {
		width: 400px;
		.input {
			margin-bottom: 10px;
			height: 40px;
		}
		.submit {
			margin-top: 20px;
			width: 100%;
			height: 40px;
		}
	}
}
</style>
  